/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState, useEffect } from "react";
import {
  Table,
  Input,
  InputNumber,
  Form,
  Typography,
  Spin,
  Button,
  Space,
} from "antd";
import http from "../../network/http";
const EditableCell = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{
            margin: 0,
          }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};
const EditableTable = (props) => {
  const [form] = Form.useForm();
  const [data, setData] = useState(props.formData);
  const [editingKey, setEditingKey] = useState("");
  const [loading, setLoading] = useState(false);

  const isEditing = (record) => record.id === editingKey;
  useEffect(() => {
    setData(props.formData);
  }, [props.formData]);
  const edit = (record) => {
    console.log(record);
    form.setFieldsValue({
      sysName: "",
      value: "",
      ...record,
    });
    setEditingKey(record.id);
  };
  const cancel = () => {
    setEditingKey("");
  };
  const save = async (value) => {
    const row = await form.validateFields();
    const newData = [...data];
    const index = newData.findIndex((item) => value.id === item.id);
    console.log(row);
    if (index > -1) {
      newData.splice(index, 1, {
        id: value.id,
        taskCate: value.taskCate,
        ...row,
      });
      setLoading(true);
      const res = await http(
        "Task",
        {
          id: value.id,
          taskCate: value.taskCate,
          ...row,
        },
        "POST",
        true
      );
      console.log(res);
      setLoading(false);
      props.refresh();
      setEditingKey("");
    }
  };
  const columns = [
    {
      title: "任务类型",
      dataIndex: "taskCate",
      render: (e) => (e === 1 ? "保守" : e === 2 ? "稳健" : "激进"),
    },
    {
      title: "补仓比例",
      dataIndex: "buyRate",
      editable: true,
    },
    {
      title: "增长比例",
      dataIndex: "increaseRate",
      editable: true,
    },
    {
      title: "卖出后买进",
      dataIndex: "afterSellBuy",
      editable: true,
    },
    {
      title: "补仓回降",
      dataIndex: "fallBack",
      editable: true,
    },
    {
      title: "止盈比例",
      dataIndex: "stopRate",
      editable: true,
    },
    {
      title: "止盈回降比例",
      dataIndex: "stopCallBack",
      editable: true,
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "id",
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Button
              size="small"
              type="primary"
              onClick={() => save(record)}
              style={{
                marginRight: 12,
              }}
            >
              保存
            </Button>
            <Button size="small" type="primary" onClick={cancel}>
              取消
            </Button>
          </span>
        ) : (
          <Space>
            <Typography.Link
              disabled={editingKey !== ""}
              onClick={() => edit(record)}
            >
              编辑
            </Typography.Link>
          </Space>
        );
      },
    },
  ];
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: "number",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });
  return (
    <Spin spinning={loading}>
      <Form form={form} component={false}>
        <Table
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          rowKey={(data) => data.id}
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>
    </Spin>
  );
};
export default EditableTable;
